<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>[[${dataBaseName}]]</title>
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.0/semantic.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.0/semantic.min.js"></script>
    <!-- Content JS HERE !-->
    <style>
        .last.container {
            margin-bottom: 300px !important;
        }

        h1.ui.center.header {
            margin-top: 3em;
        }

        h2.ui.center.header {
            margin: 4em 0em 2em;
        }

        h3.ui.center.header {
            margin-top: 2em;
            padding: 2em 0em;
        }
    </style>
</head>

<body>
<!-- 目录开始 -->
<div class="ui sidebar fixed vertical menu">
    <div class="item menu-table-index" th:each="tableInfo,state:${tableInfoList}" th:data="${state.index}">
        <a style="cursor:pointer">
            [[${state.index}]].[[${tableInfo.tableName}]]
        </a>
        <div>
            <b>
                [[${tableInfo.tableComment}]]
            </b>
        </div>
    </div>
</div>
<!--目录结束-->

<div class="pusher">
    <div class="ui launch right fixed button menu-toggle" style="position: fixed">
        <i class="content icon"></i>
    </div>
    <div class="to-hide">
        <h1 id="top" class="ui center aligned header ">数据库名称：[[${dataBaseName}]]</h1>
        <!--表说明开始-->
        <div th:each="tableInfo,state:${tableInfoList}" th:id="db-table- + ${state.index}" class="ui container last db-table">
            <h1 class="ui center aligned header">表名:[[${tableInfo.tableName}]]</h1>
            <h3 class="ui center aligned ">注释:[[${tableInfo.tableComment}]]</h3>
            <table class="ui orange celled table">
                <caption>表格信息</caption>
                <thead>
                <tr>
                    <th>字段</th>
                    <th>类型</th>
                    <th>注释</th>
                    <th>键</th>
                    <th>能否为空</th>
                    <th>默认值</th>
                    <th>其他</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="tableFieldInfo:${tableInfo.tableFieldInfoList}">
                    <td>[[${tableFieldInfo.columnName}]]</td>
                    <td>[[${tableFieldInfo.columnType}]]</td>
                    <td>[[${tableFieldInfo.columnComment}]]</td>
                    <td>[[${tableFieldInfo.columnKey}]]</td>
                    <td>[[${tableFieldInfo.isNullAble}]]</td>
                    <td>[[${tableFieldInfo.columnDefault}]]</td>
                    <td>[[${tableFieldInfo.extra}]]</td>
                </tr>
                </tbody>
            </table>
            <table class="ui orange celled table">
                <caption>索引信息</caption>
                <thead>
                <tr>
                    <th>名称</th>
                    <th>栏位</th>
                    <th>索引类型</th>
                    <th>索引方式</th>
                    <th>索引备注</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="tableKeyInfo:${tableInfo.tableKeyInfoList}">
                    <td>[[${tableKeyInfo.keyName}]]</td>
                    <td>[[${tableKeyInfo.columnName}]]</td>
                    <td>[[${tableKeyInfo.uniqueName}]]</td>
                    <td>[[${tableKeyInfo.indexType}]]</td>
                    <td>[[${tableKeyInfo.indexComment}]]</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('.ui.sidebar').sidebar({

        });

        $(".menu-toggle").click(function () {
            $('.ui.sidebar').sidebar("toggle");
        });

        $(".menu-table-index").click(function () {
            var $this = $(this);
            var tableIndex = $this.attr("data");
            location.href = "#db-table-" + tableIndex;
            $('.ui.sidebar').sidebar("toggle");
        });

    })
</script>
</body>
</html>